<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .cur {
            width: 300px;
            height: 300px;
            background-image: linear-gradient(to right, red, orange, yellow, blue);
        }

        .cur button {
            width: 100px;
            height: 100px;
            margin: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
       
        <form action="http://www.baidu.com">
           
            <button @click.prevent="showMessage">点击我弹出1126很帅</button>
        </form>

        <div class="cur" @click="showMessage1">
           
            <button @click.stop="showMessage1">阻止事件传播</button>
        </div>

       
         <button @click.once="showMessage2">once修饰符</button>

         
    </div>
</body>

</html>
<script>
    //关联VM
    const VM = new Vue({
        el: '#app',
        methods: {
            //按钮的事件回调
            showMessage(e) {
                //阻止默认事件:这种写法是曾经学习DOM的时候学习过的，阻止默认事件！！！
                // e.preventDefault();
                //老师只是想弹出这句话，form表单默认行为阻止
                alert('1126都是帅哥美女');
            },
            showMessage1(e) {
                //阻止默认事件
                // e.stopPropagation();
                alert('点击我,我是showMessage1');
            },
            showMessage2(){
                alert('once修饰符')
            }


        }
    })
</script>